"use client";
/**
 * ActivateClient
 *
 * Shown after sign-up/sign-in on /activate/[orderId].
 *
 * - Fetches the order and shows the real eSIM QR code once provisioning is done.
 * - Offers a one-tap install, then the SM-DP+ address and matching ID, then
 *   written steps. A QR code is useless on the one phone the customer is
 *   reading this on, so every layer below it has to stand on its own.
 * - Says plainly when it cannot read the order at all. The page used to print
 *   a fixed reassurance that a QR code was on its way, and then never
 *   ask anyone anything, which reads as progress and is not.
 * - Never spins forever. A spinner is a promise that something is still
 *   happening; when the answer is "this order does not exist", "it is not
 *   yours", or "provisioning has not finished in the time it normally takes",
 *   the page stops and says which, with something the customer can do next.
 * - Optionally collects phone number / WhatsApp for eSIM delivery notifications.
 *   Phone is NEVER required — user can skip.
 */
import { useCallback, useEffect, useRef, useState, FormEvent } from "react";
import {
  ANDROID_INSTALL_STEPS,
  IPHONE_INSTALL_STEPS,
  directInstallUrl,
  manualActivationCode,
} from "@/lib/esim-install";
import type { EsimOrder } from "@/vendor/carrier/types";

interface Props {
  orderId: string;
}

type LoadState =
  | { phase: "loading" }
  | { phase: "ready"; order: EsimOrder }
  /**
   * `terminal` means retrying cannot change the answer. A 404 or a 403 is a
   * fact about this order, not a hiccup, so the page offers support instead of
   * a "Try again" button that will fail identically.
   */
  | { phase: "error"; message: string; terminal: boolean }
  /** Still provisioning after the polls ran out. Not an error, not progress. */
  | { phase: "stalled"; order: EsimOrder };

/** Provisioning is usually seconds. Poll a bounded number of times, then stop. */
const POLL_INTERVAL_MS = 4000;
const MAX_POLLS = 15;

/**
 * What happened to the delivery email, as the page is allowed to describe it.
 *
 * "unconfigured" is on this list because a storefront with no Resend key is a
 * working storefront, and the page must say "we cannot email this" rather than
 * letting the customer leave believing a copy is on its way.
 */
type EmailState =
  | { phase: "idle" }
  | { phase: "sending" }
  | { phase: "sent" }
  | { phase: "unavailable"; reason: string };

export function ActivateClient({ orderId }: Props) {
  const [phone, setPhone] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);
  const [state, setState] = useState<LoadState>({ phase: "loading" });
  const [copied, setCopied] = useState(false);
  const [email, setEmail] = useState<EmailState>({ phase: "idle" });
  const pollsRef = useRef(0);
  const emailAskedRef = useRef(false);
  // Bumped by "Check again". The polling effect depends on it, so a new value
  // tears the old loop down and starts a fresh one. Resetting the counter and
  // calling loadOrder once would fetch a single time and then sit on the
  // spinner forever, because loadOrder is stable and the effect never re-runs.
  const [pollCycle, setPollCycle] = useState(0);

  const loadOrder = useCallback(async (): Promise<EsimOrder | null> => {
    try {
      const res = await fetch(`/api/orders/${encodeURIComponent(orderId)}`, {
        cache: "no-store",
      });
      const payload = (await res.json().catch(() => ({}))) as {
        order?: EsimOrder;
        error?: string;
        code?: string;
      };
      if (!res.ok || !payload.order) {
        // 404 and 403 are settled answers: the order is unknown, or it is not
        // this account's. Retrying returns the same status, and a spinner over
        // the top of it is a lie about what the page is waiting for.
        const terminal = res.status === 404 || res.status === 403 || payload.code === "not_found";
        setState({
          phase: "error",
          terminal,
          message:
            payload.error ??
            (terminal
              ? "We can't find this order on your account."
              : "We could not load your eSIM details right now."),
        });
        return null;
      }
      setState({ phase: "ready", order: payload.order });
      return payload.order;
    } catch {
      setState({
        phase: "error",
        terminal: false,
        message: "We could not reach your eSIM details. Check your connection and try again.",
      });
      return null;
    }
  }, [orderId]);

  useEffect(() => {
    let cancelled = false;
    let timer: ReturnType<typeof setTimeout> | undefined;

    async function tick() {
      const order = await loadOrder();
      if (cancelled) return;
      const stillWorking = order?.status === "pending" || order?.status === "provisioning";
      if (!stillWorking) return;
      if (pollsRef.current < MAX_POLLS) {
        pollsRef.current += 1;
        timer = setTimeout(tick, POLL_INTERVAL_MS);
        return;
      }
      // Out of polls and still not ready. Stop the spinner and say so — it has
      // now taken materially longer than provisioning normally does, and
      // "we're preparing your eSIM" under an animation is no longer true.
      setState({ phase: "stalled", order });
    }

    void tick();
    return () => {
      cancelled = true;
      if (timer) clearTimeout(timer);
    };
  }, [loadOrder, pollCycle]);

  /**
   * Ask the server to email this eSIM, once, the moment it is ready.
   *
   * The page has always promised "we'll email you the QR code" and, until
   * there was a sender, nothing was ever sent. The request is fired from here
   * rather than from fulfilment because this is the first place that knows the
   * order reached `ready`; the route itself carries the ownership check and
   * the send-once marker, so a reload does not produce a second copy.
   */
  useEffect(() => {
    if (state.phase !== "ready" || state.order.status !== "ready") return;
    if (emailAskedRef.current) return;
    emailAskedRef.current = true;

    let cancelled = false;
    setEmail({ phase: "sending" });
    void (async () => {
      try {
        const res = await fetch(`/api/orders/${encodeURIComponent(orderId)}/email`, {
          method: "POST",
        });
        const payload = (await res.json().catch(() => ({}))) as {
          sent?: boolean;
          reason?: string;
        };
        if (cancelled) return;
        if (res.ok && payload.sent) {
          setEmail({ phase: "sent" });
          return;
        }
        setEmail({ phase: "unavailable", reason: payload.reason ?? "unavailable" });
      } catch {
        if (!cancelled) setEmail({ phase: "unavailable", reason: "network" });
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [state, orderId]);

  async function handlePhoneSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSaving(true);
    setSaveError(null);
    try {
      // POST phone to user profile (best-effort — non-blocking)
      const res = await fetch("/api/profile/phone", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ phone }),
      });
      if (!res.ok) {
        const err = (await res.json()) as { error?: string };
        throw new Error(err.error ?? "Failed to save phone number");
      }
      setSubmitted(true);
    } catch (err) {
      const msg = err instanceof Error ? err.message : "Failed to save. Please try again.";
      setSaveError(msg);
    } finally {
      setSaving(false);
    }
  }

  async function copyActivationCode(code: string) {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      setCopied(false);
    }
  }

  const order =
    state.phase === "ready" || state.phase === "stalled" ? state.order : null;
  const ready = order?.status === "ready";
  const manualCode = order ? manualActivationCode(order) : null;

  return (
    <div className="mx-auto max-w-lg px-4 py-16">
      {/* Header */}
      <div className="text-center mb-10">
        <div className="inline-flex items-center justify-center size-14 rounded-full bg-emerald-500/10 border border-emerald-500/30 mb-4">
          <span className="text-2xl">{ready ? "✓" : "•"}</span>
        </div>
        <h1 className="text-2xl font-bold text-sand-900 dark:text-sand-50">
          {ready ? "Your eSIM is ready" : "Setting up your eSIM"}
        </h1>
        <p className="mt-2 text-sm text-sand-500">Order: {orderId}</p>
      </div>

      <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 text-center mb-8">
        {state.phase === "loading" && (
          <>
            <div className="h-8 w-8 rounded-full border-2 border-[var(--brand-accent)] border-t-transparent animate-spin mx-auto mb-4" />
            <p className="text-sand-600 dark:text-sand-400 text-sm">Loading your eSIM…</p>
          </>
        )}

        {state.phase === "error" && (
          <>
            <p className="text-sand-900 dark:text-sand-50 text-sm font-medium mb-2">
              {state.terminal ? "We can't show this eSIM" : "We couldn't load your eSIM"}
            </p>
            <p className="text-sand-600 dark:text-sand-400 text-sm mb-4">{state.message}</p>
            <p className="text-sand-400 text-xs mb-4">
              Your payment is safe and your order number is above. Quote it if you contact us.
            </p>
            <div className="flex items-center justify-center gap-3">
              {/* No "Try again" on a terminal answer: the same request would
                  return the same status, and a button that cannot work is
                  worse than no button. */}
              {!state.terminal && (
                <button
                  type="button"
                  onClick={() => {
                    pollsRef.current = 0;
                    setState({ phase: "loading" });
                    void loadOrder();
                  }}
                  className="rounded-full bg-[var(--brand-accent)] px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
                >
                  Try again
                </button>
              )}
              <a
                href="/contact"
                className={
                  state.terminal
                    ? "rounded-full bg-[var(--brand-accent)] px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
                    : "rounded-full border border-sand-300 dark:border-sand-700 px-5 py-2 text-sm text-sand-900 dark:text-sand-50 hover:bg-white/10 transition-colors"
                }
              >
                Contact support
              </a>
            </div>
          </>
        )}

        {state.phase === "stalled" && (
          <>
            <p className="text-sand-900 dark:text-sand-50 text-sm font-medium mb-2">
              This is taking longer than it should
            </p>
            <p className="text-sand-600 dark:text-sand-400 text-sm mb-4">
              Your payment went through and your order is queued, but the eSIM isn&apos;t ready
              yet. We&apos;ll email your QR code as soon as it is — you don&apos;t have to wait
              here.
            </p>
            <div className="flex items-center justify-center gap-3">
              <button
                type="button"
                onClick={() => {
                  pollsRef.current = 0;
                  setState({ phase: "loading" });
                  setPollCycle((n) => n + 1);
                }}
                className="rounded-full border border-sand-300 dark:border-sand-700 px-5 py-2 text-sm text-sand-900 dark:text-sand-50 hover:bg-white/10 transition-colors"
              >
                Check again
              </button>
              <a
                href="/contact"
                className="rounded-full bg-[var(--brand-accent)] px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
              >
                Contact support
              </a>
            </div>
          </>
        )}

        {state.phase === "ready" && order && !ready && order.status !== "failed" && (
          <>
            <div className="h-8 w-8 rounded-full border-2 border-[var(--brand-accent)] border-t-transparent animate-spin mx-auto mb-4" />
            <p className="text-sand-600 dark:text-sand-400 text-sm mb-2">
              We&apos;re preparing your eSIM. This usually takes less than a minute.
            </p>
            <p className="text-sand-400 text-xs">
              You can leave this page — we&apos;ll email you the QR code when it&apos;s ready.
            </p>
          </>
        )}

        {order?.status === "failed" && (
          <>
            <p className="text-sand-900 dark:text-sand-50 text-sm font-medium mb-2">
              Your eSIM couldn&apos;t be set up
            </p>
            <p className="text-sand-600 dark:text-sand-400 text-sm mb-4">
              {order.failureMessage ??
                "Something went wrong while activating your plan. Our team can sort this out for you."}
            </p>
            <a
              href="/contact"
              className="inline-block rounded-full bg-[var(--brand-accent)] px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
            >
              Contact support
            </a>
          </>
        )}

        {ready && (
          <>
            {order?.qrCode ? (
              /* The QR image is served by the fulfilment API; next/image would
                 need every possible operator origin allow-listed in
                 next.config, so this stays a plain img on purpose. */
              // eslint-disable-next-line @next/next/no-img-element
              <img
                src={order.qrCode}
                alt="eSIM activation QR code"
                className="mx-auto mb-4 size-56 rounded-xl bg-white p-2"
              />
            ) : (
              <p className="text-sand-600 dark:text-sand-400 text-sm mb-4">
                Your eSIM is active. Enter the details below on your phone to install it.
              </p>
            )}
            <p className="text-sand-600 dark:text-sand-400 text-sm">
              Scan this with your phone&apos;s camera, or add the eSIM manually with the details
              below.
            </p>
            {order?.planName && <p className="mt-2 text-xs text-sand-400">{order.planName}</p>}
          </>
        )}
      </div>

      {/* What happened to the email, in one line. The page promises a copy by
          email in two other places; if none can be sent, it has to say so here
          rather than let the customer navigate away expecting one. */}
      {ready && email.phase !== "idle" && (
        <p className="mb-4 text-center text-xs text-sand-500">
          {email.phase === "sending" && "Emailing you a copy…"}
          {email.phase === "sent" && "We've emailed a copy to the address that paid."}
          {email.phase === "unavailable" &&
            (email.reason === "unconfigured" || email.reason === "no-from-address"
              ? "Email delivery isn't set up on this store, so keep this page — everything you need to install is on it."
              : "We couldn't email you a copy. Everything you need to install is on this page.")}
        </p>
      )}

      {/* One tap, no typing — iOS 17.4+ only, and harmless everywhere else:
          a phone that cannot handle the link opens a page that explains the
          manual route, which is the next card down. */}
      {ready && manualCode && (
        <a
          href={directInstallUrl(manualCode)}
          className="mb-4 block w-full rounded-full bg-[var(--brand-accent)] px-6 py-3 text-center text-sm font-semibold text-white transition-opacity hover:opacity-90"
        >
          Install this eSIM on this iPhone
        </a>
      )}

      {/* Manual install — always available once we know the credentials, because
          a QR is useless on the one phone the customer is reading this on. */}
      {ready && (order?.smdpAddress || manualCode) && (
        <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-6 mb-8">
          <p className="text-sm font-medium text-sand-900 dark:text-sand-50 mb-3">
            Install manually
          </p>
          <dl className="space-y-3 text-sm">
            {order?.smdpAddress && (
              <div>
                <dt className="text-xs text-sand-500">SM-DP+ address</dt>
                <dd className="font-mono break-all text-sand-900 dark:text-sand-50">
                  {order.smdpAddress}
                </dd>
              </div>
            )}
            {order?.matchingId && (
              <div>
                <dt className="text-xs text-sand-500">Activation code</dt>
                <dd className="font-mono break-all text-sand-900 dark:text-sand-50">
                  {order.matchingId}
                </dd>
              </div>
            )}
            {order?.iccid && (
              <div>
                <dt className="text-xs text-sand-500">ICCID</dt>
                <dd className="font-mono break-all text-sand-900 dark:text-sand-50">
                  {order.iccid}
                </dd>
              </div>
            )}
          </dl>
          {manualCode && (
            <button
              type="button"
              onClick={() => void copyActivationCode(manualCode)}
              className="mt-4 w-full rounded-lg border border-sand-300 dark:border-sand-700 px-4 py-2 text-sm text-sand-900 dark:text-sand-50 hover:bg-white/10 transition-colors"
            >
              {copied ? "Copied" : "Copy activation string"}
            </button>
          )}

          {/* The steps in words. A customer whose camera cannot reach a second
              screen, and whose phone is too old for the one-tap link, has the
              credentials above and no idea where to type them. */}
          <div className="mt-6 grid gap-5 border-t border-sand-200 pt-5 dark:border-sand-800">
            <div>
              <p className="mb-2 text-xs font-semibold tracking-wide text-sand-500 uppercase">
                On iPhone
              </p>
              <ol className="list-decimal space-y-1 pl-4 text-sm text-sand-700 dark:text-sand-300">
                {IPHONE_INSTALL_STEPS.map((step) => (
                  <li key={step}>{step}</li>
                ))}
              </ol>
            </div>
            <div>
              <p className="mb-2 text-xs font-semibold tracking-wide text-sand-500 uppercase">
                On Android
              </p>
              <ol className="list-decimal space-y-1 pl-4 text-sm text-sand-700 dark:text-sand-300">
                {ANDROID_INSTALL_STEPS.map((step) => (
                  <li key={step}>{step}</li>
                ))}
              </ol>
            </div>
          </div>
        </div>
      )}

      {/* Optional phone / WhatsApp collection */}
      <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-6">
        <div className="flex items-start gap-3 mb-4">
          <div className="shrink-0 mt-0.5">
            <span className="inline-flex items-center justify-center size-5 rounded-full bg-white/10 text-[10px] text-sand-500">
              ?
            </span>
          </div>
          <div>
            <p className="text-sm font-medium text-sand-900 dark:text-sand-50">
              Get eSIM updates via WhatsApp{" "}
              <span className="text-sand-400 font-normal">(optional)</span>
            </p>
            <p className="text-xs text-sand-500 mt-0.5">
              We&apos;ll send your QR code and activation status. You can skip this.
            </p>
          </div>
        </div>

        {submitted ? (
          <p className="text-sm text-emerald-300 text-center py-2">
            ✓ Phone number saved. We&apos;ll send updates to {phone}.
          </p>
        ) : (
          <form onSubmit={handlePhoneSubmit} className="space-y-3">
            <div className="flex gap-2">
              <input
                type="tel"
                autoComplete="tel"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                placeholder="+1 555 000 0000"
                className="flex-1 rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
              />
              <button
                type="submit"
                disabled={saving || !phone.trim()}
                className="rounded-lg bg-[var(--brand-accent)] px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50 whitespace-nowrap"
              >
                {saving ? "Saving…" : "Save"}
              </button>
            </div>
            {saveError && <p className="text-xs text-red-300">{saveError}</p>}
            <button
              type="button"
              onClick={() => setSubmitted(true)}
              className="w-full text-center text-xs text-sand-400 hover:text-sand-500 py-1"
            >
              Skip for now
            </button>
          </form>
        )}
      </div>
    </div>
  );
}